<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="images/favorite.ico" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="js/Validform_v5.3_ncr_min.js"></script>
<title>个人信息管理系统</title>
<style type="text/css">
		.message {
			text-align: center;
			background: #2C2C30;
			padding: 20px 10px;
			width: 260px;
			color: white;
			margin-top: 27%;
			margin-left:25%;
			border-radius: 5px;
			font-weight: bold;
			position:absolute;
			display:none;
			z-index:99;
		}
		</style>
</head>
<body>
	<div class="container">
		<header style="height:15%;"> </header>
		<section>
		<div id="container_demo">
			<a class="hiddenanchor" id="toregister"></a> <a class="hiddenanchor"
				id="tologin"></a>
			<div id="wrapper">
				<div id="login" class="animate form">
					<form id="logform" action="login_do.action" autocomplete="on">
						<h1>Log in</h1>
						<p>
							<label for="username" class="uname" data-icon="u"> Your
								email or username </label><span class="Validform_checktip"></span> <input
								id="username" name="param" required="required" type="text"
								placeholder="myusername or mymail@mail.com" datatype="e|s3-14"
								errormsg="(不是合法的用户名或者E-mail)" nullmsg="(请填写用户名或E-mail！)"
								sucmsg=" " />
						</p>
						<p>
							<label for="password" class="youpasswd" data-icon="p">
								Your password </label><span class="Validform_checktip"></span> <input
								id="password" name="user.passWord" required="required" type="password"
								placeholder="eg. X8df!90EO" datatype="*6-15"
								errormsg="(密码范围在6~15位之间！)" nullmsg="(请填写密码！)" sucmsg=" " />
						</p>
						<p class="keeplogin">
							<input type="checkbox" name="loginkeeping" id="loginkeeping" />
							<label for="loginkeeping">remember my password</label>
						</p>
						<p class="login button">
							<input id="submit1" type="submit" value="Login" />
						</p>
						<p class="change_link">
							Not a member yet ? <a href="index.jsp?#toregister"
								class="to_register">Register</a>
						</p>
					</form>
				</div>

				<div id="register" class="animate form">
					<form id="regform" action="reg_do.action" autocomplete="on">
						<h1>Sign up</h1>
						<p>
							<label for="usernamesignup" class="uname" data-icon="u">Your
								username</label><span class="Validform_checktip"></span> <input
								id="usernamesignup" name="user.userName" required="required"
								type="text" placeholder="mysuperusername690"
								ajaxurl="check_do.action?type=1" datatype="s3-14"
								errormsg="(用户名至少3个字符,最多14个字符！)" sucmsg=" " />
						</p>
						<p>
							<label for="emailsignup" class="youmail" data-icon="e">
								Your email</label><span class="Validform_checktip"></span> <input
								id="emailsignup" name="user.email" required="required"
								type="email" placeholder="mysupermail@mail.com"
								ajaxurl="check_do.action?type=2" datatype="e"
								errormsg="(请输入正确的电子邮件！)" sucmsg=" " />
						</p>
						<p>
							<label for="passwordsignup" class="youpasswd" data-icon="p">Your
								password </label><span class="Validform_checktip"></span> <input
								id="passwordsignup" name="user.passWord" required="required"
								type="password" placeholder="eg. X8df!90EO" datatype="*6-15"
								errormsg="(密码范围在6~15位之间！)" sucmsg=" " />
						</p>
						<p>
							<label for="passwordsignup_confirm" class="youpasswd"
								data-icon="p">Please confirm your password </label><span
								class="Validform_checktip"></span> <input
								id="passwordsignup_confirm" name="passwordsignup_confirm"
								required="required" type="password" placeholder="eg. X8df!90EO"
								datatype="*" recheck="user.passWord" nullmsg="(请再输入一次密码！)"
								errormsg="(您两次输入的账号密码不一致！)" sucmsg=" " />
						</p>
						<p class="signin button">
							<input id="submit2" type="submit" value="Sign up" />
						</p>
						<p class="change_link">
							Already a member ? <a href="index.jsp?#tologin"
								class="to_register"> Go and log in </a>
						</p>
					</form>
				</div>
				<div id="tip" class="animated message"></div>
			</div>
		</div>
		</section>
	</div>
</body>
<script type="text/javascript">
	//页面加载完成执行
	$(function(){
		getCookie();
		$("#logform").Validform({
			tiptype:4,
			btnSubmit:"#submit1",
			dragonfly:true,
			ajaxPost:true,
			callback:function(data){	
				if(data.status=="n"){
					$("#tip").html(data.info);
					$("#tip").show();
					$("#tip").addClass("fadeIn");
					var wait = window.setTimeout(function() {
						$("#tip").removeClass("fadeIn");
						$("#tip").hide();						
					}, 2500);
					return ;
				}else {
					setCookie();
					location.href = "main_page.action";
				}									
			}
		});
		$("#regform").Validform({
			tiptype:4,
			btnSubmit:"#submit2", 
			dragonfly:true,
			ajaxPost:true,			
			callback:function(data){	
				if(data.status=="y"){
					$("#tip").html(data.info);
					$("#tip").show();
					$("#tip").addClass("fadeIn");
					var wait = window.setTimeout(function() {
						$("#tip").removeClass("fadeIn");
						$("#regform").resetForm()
						$("#tip").hide();						
					}, 2500);
					location.href = "index.jsp?#tologin";
				}else {
					
				}
			}
		});
	});
	//保存用户名与密码到Cookie
	function setCookie(){ //设置cookie
    	 var username = $("#username").val(); //获取用户名信息
    	 var password = $("#password").val(); //获取登陆密码信息
    	 var checked = $("[name='loginkeeping']:checked");//获取“是否记住密码”复选框
    	 if(checked && checked.length > 0){ //判断是否选中了“记住密码”复选框
    		 var date = new Date();
    		 date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000));
    		$.cookie("username",username,{ path: '/', expires: date });//调用jquery.cookie.js中的方法设置cookie中的用户名
    	 	$.cookie("password",$.base64.encode(password),{ path: '/', expires: date });//调用jquery.cookie.js中的方法设置cookie中的登陆密码，并使用base64（jquery.base64.js）进行加密
    	 }else{ 
    	    $.cookie("password", null); 
    	 }	
   	} 
	//从Cookie获取用户名与密码
    function getCookie(){ //获取cookie
	  	 var username = $.cookie("username"); //获取cookie中的用户名
	  	 var password =  $.cookie("password"); //获取cookie中的登陆密码
	  	 if(password){//密码存在的话把“记住用户名和密码”复选框勾选住
	  		$("[name='loginkeeping']").attr("checked","true");
	  	 }
	  	 if(username){//用户名存在的话把用户名填充到用户名文本框
	  		$("#username").val(username);
	  	 }
	  	 if(password){//密码存在的话把密码填充到密码文本框
	  		$("#password").val($.base64.decode(password));
	  	 }
 	}
	
	</script>
</html>